import {Component} from '@angular/core';
import {SelectItem} from 'primeng/primeng';
import {CountryService} from '../service/countryservice';
@Component({
    templateUrl: './checkboxdemo.html',
    styleUrls: ['./checkboxdemo.css']
})

export class CheckboxDemo {

    selectedCities: string[] = [];
    selectedCategories: string[] = ['Technology', 'Sports'];
    checked: boolean = false;
    //MultiSelectDemo
    cars: SelectItem[];
    selectedCars: string[] = [];

    //ChipsDemo
    values1: string[];
    values2: string[];
    //EditorDemo
    text1: string = '<div>欢迎来到丰信!</div><div>您好！<b>编辑人</b> 熊宝</div><div><br></div>';
    text2: string;
    //InputTextDemo
    text: string;
    disabled: boolean = true;
    toggleDisabled() {
        this.disabled = !this.disabled;
    }
    //Mask
    mask1: string;

    spinner1: number;
    spinner2: number;
    spinner3: number;
    spinner4: number = 100;

    //ToggleButtonDemo
    checked1: boolean = false;
    checked2: boolean = true;
   //InputSwitchDemo
    checked3: boolean = false;
    checked4: boolean = true;
    //RadioButtonDemo
    val51: string;
    val52: string = 'Option 2';
    //TriStateCheckboxDemo
    value: any;
    //RatingDemo
    rating: number;
    rating2: number = 5;
     msg: string;

      handleRate(event) {
          this.msg = "You have rated " + event.value;
      }

      handleCancel(event) {
          this.msg = "Rating Cancelled";
      }
    //autocomplete
    country: any;
    countries: any[];
    filteredCountriesSingle: any[];
    filteredCountriesMultiple: any[];
    brands: string[] = ['土豆','西红柿','茄子','黄瓜','西瓜','花生','苹果','梨','红枣','核桃'];
    filteredBrands: any[];
    brand: string;

    constructor(private countryService: CountryService) {

      this._initSelect(),
      this._initCity(),
      this._initType()
    }
    filterCountrySingle(event) {
        let query = event.query;
    }

    filterCountryMultiple(event) {
        let query = event.query;
    }

    filterCountry(query, countries: any[]):any[] {

        let filtered : any[] = [];
        for(let i = 0; i < countries.length; i++) {
            let country = countries[i];
            if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
                filtered.push(country);
            }
        }
        return filtered;
    }
    filterBrands(event) {
        this.filteredBrands = [];
        for(let i = 0; i < this.brands.length; i++) {
            let brand = this.brands[i];
            if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
                this.filteredBrands.push(brand);
            }
        }
    }

    handleDropdownClick() {
        this.filteredBrands = [];

        setTimeout(() => {
            this.filteredBrands = this.brands;
        }, 100)
    }

    _initSelect(){
      this.cars = [];
      this.cars.push({label: '土豆', value: '土豆'});
      this.cars.push({label: '茄子', value: '茄子'});
      this.cars.push({label: '香蕉', value: '香蕉'});
      this.cars.push({label: '苹果', value: '苹果'});
      this.cars.push({label: '梨', value: '梨'});
      this.cars.push({label: '花生', value: '花生'});
      this.cars.push({label: '瓜子', value: '瓜子'});
      this.cars.push({label: '南瓜', value: '南瓜'});
      this.cars.push({label: '西红柿', value: '西红柿'});
      this.cars.push({label: '西瓜', value: '西瓜'});
    }

    cities: SelectItem[];
    selectedCity: any;
    selectedCar: string;
    selectedCar2: string = '上海';

    _initCity(){
        this.cities = [];
        this.cities.push({label:'山东', value:'山东'});
        this.cities.push({label:'湖北', value:'湖北'});
        this.cities.push({label:'上海', value:'上海'});
        this.cities.push({label:'火星', value:'火星'});
        this.cities.push({label:'水星', value:'水星'});
    }
    //selectbutton
    types: SelectItem[];
    selectedType: string;
    selectedTypes: string[] = ['首页','联系我们'];

    _initType(){
      this.types = [];
      this.types.push({label: '首页', value: '首页'});
      this.types.push({label: '关于我们', value: '关于我们'});
      this.types.push({label: '联系我们', value: '联系我们'});

    }
    clear() {
        this.selectedType = null;
        this.selectedTypes = [];
    }

    //slider
    slider1: number;
    slider2: number = 50;
    slider3: number;
    val4:number;
    rangeValues: number[] = [20,80];

    //calendar
    date1: Date;
    minDate: Date;
    maxDate: Date;
    es: any;
    tr: any;
    invalidDates: Array<Date>

    ngOnInit() {
        this.es = {
            firstDayOfWeek: 1,
            dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
            dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
            dayNamesMin: [ "D","L","M","X","J","V","S" ],
            monthNames: [ "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre" ],
            monthNamesShort: [ "ene","feb","mar","abr","may","jun","jul","ago","sep","oct","nov","dic" ]
        }

        this.tr = {
            firstDayOfWeek : 1
        }

        let today = new Date();
        let month = today.getMonth();
        let year = today.getFullYear();
        let prevMonth = (month === 0) ? 11 : month -1;
        let prevYear = (prevMonth === 11) ? year - 1 : year;
        let nextMonth = (month === 11) ? 0 : month + 1;
        let nextYear = (nextMonth === 0) ? year + 1 : year;
        this.minDate = new Date();
        this.minDate.setMonth(prevMonth);
        this.minDate.setFullYear(prevYear);
        this.maxDate = new Date();
        this.maxDate.setMonth(nextMonth);
        this.maxDate.setFullYear(nextYear);

        let invalidDate = new Date();
        invalidDate.setDate(today.getDate() - 1);
        this.invalidDates = [today,invalidDate];
    }
}
